<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>First programs in GTK+</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, First programs in GTK+, GTK+ library, C">
<meta name="description" content="First programs in GTK+">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>First programs in GTK+</h1>


<p>
In this part of the GTK+ programming tutorial, we will create our first programs in GTK+
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>


<h2>Simple example</h2>

<p>
We start with a very simple example. We will show a basic window. 
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;

int main( int argc, char *argv[])
{
  GtkWidget *window;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_widget_show(window);

  gtk_main();

  return 0;
}
</pre>

<p>
This example will show a basic window on screen. 
</p>

<pre class="code">
  gcc -o simple simple.c `pkg-config --libs --cflags gtk+-2.0`
</pre>

<p>
This is how we compile the example. 
</p>

<pre class="explanation">
 gtk_init(&amp;argc, &amp;argv);
</pre>

<p>
Here we initiate the GTK+ library. 
</p>

<pre class="explanation">
 window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
</pre>

<p>
We create a <b class="keyword">GtkWindow</b> widget. The window type 
is <b class="keyword">GTK_WINDOW_TOPLEVEL</b>.
Toplevel windows have a titlebar and a border. They are 
managed by the window manager. 
</p>

<pre class="explanation">
 gtk_widget_show(window);
</pre>

<p>
After we have created a widget, we must show it. 
</p>

<pre class="explanation">
 gtk_main();
</pre>

<p>
This code enters the GTK+ main loop. From this point, 
the application sits and waits for events to happen.
</p>

<br>
<img src="/img/gui/cgtk/simple.png" alt="Simple">
<div class="figure">Figure: Simple</div>
<br>

<h2>Centering the window</h2>

<p>
If we do not position the window ourselves, the window manager will position it for us.
In the next example, we will center the window.  
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;

int main( int argc, char *argv[])
{
  GtkWidget *window;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "Center");
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_widget_show(window);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
      G_CALLBACK(gtk_main_quit), NULL);

  gtk_main();

  return 0;
}
</pre>

<p>
In our example, we center the window, set a title and size for the window.  
</p>

<pre class="explanation">
 gtk_window_set_title(GTK_WINDOW(window), "Center");
</pre>

<p>
The <b class="keyword">gtk_window_set_title()</b> function will set a 
window title. If we do not set a title ourselves, the GTK+ will use a 
name of a source file as a title.
</p>

<pre class="explanation">
 gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
</pre>

<p>
This code sets the size of the window to 230x150 pixels. Note, that we 
are talking about the client area, excluding 
the decorations provided by the window manager. 
</p>

<pre class="explanation">
 gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
</pre>

<p>
This code centers the window. 
</p>

<pre class="explanation">
 g_signal_connect_swapped(G_OBJECT(window), "destroy",
     G_CALLBACK(gtk_main_quit), NULL);
</pre>

<p>
In the previous example, the window was not completely destroyed, when we clicked on the x 
button. We can see it, if we launch the example from the command line. The window does 
not react to the <b class="keyword">destroy</b> signal by default. We must explicitly terminate
the application by connecting the destroy signal to the 
<b class="keyword">gtk_main_quit()</b> function. 
</p>


<h2>The application icon</h2>

<p>
In the next example, we show the application icon. Most window managers display the 
icon in the left corner of the titlebar and also on the taskbar. 
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;

GdkPixbuf *create_pixbuf(const gchar * filename)
{
   GdkPixbuf *pixbuf;
   GError *error = NULL;
   pixbuf = gdk_pixbuf_new_from_file(filename, &amp;error);
   if(!pixbuf) {
      fprintf(stderr, "%s\n", error->message);
      g_error_free(error);
   }

   return pixbuf;
}

int main( int argc, char *argv[])
{
  GtkWidget *window;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "icon");
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_icon(GTK_WINDOW(window), create_pixbuf("web.png"));
  gtk_widget_show(window);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
      G_CALLBACK(gtk_main_quit), NULL);

  gtk_main();

  return 0;
}
</pre>

<p>
The code example shows the application icon. 
</p>

<pre class="explanation">
 gtk_window_set_icon(GTK_WINDOW(window), create_pixbuf("web.png"));
</pre>

<p>
The <b class="keyword">gtk_window_set_icon()</b> displays the 
icon for our window. The <b class="keyword">create_pixbuf()</b> creates 
a <b class="keyword">GdkPixbuf</b> from a png file. 
</p>

<pre class="explanation">
 pixbuf = gdk_pixbuf_new_from_file(filename, &amp;error);
</pre>

<p>
According to the documentation, the <b class="keyword">gdk_pixbuf_new_from_file()</b> 
function creates a new pixbuf by loading an image from a file. The file format is 
detected automatically. If NULL is returned, then error will be set.
</p>

<br>
<img src="/img/gui/cgtk/icon.png" alt="Icon">&nbsp;&nbsp;
<img src="/img/gui/cgtk/taskbar.png" alt="Taskbar Icon">
<div class="figure">Figure: Icon</div>
<br>



<h2>Increase - Decrease</h2>

<p>
We finish the first chapter of the GTK+ programming tutorial with an example, 
where we have three child widgets.
Two buttons and one label. The label will hold an integer number. The buttons 
will increase or decrease this number. 
</p>

<pre class="code">
#include &lt;gtk/gtk.h&gt;

gint count = 0;
char buf[5];

void increase(GtkWidget *widget, gpointer label)
{
  count++;

  sprintf(buf, "%d", count);
  gtk_label_set_text(GTK_LABEL(label), buf);
}

void decrease(GtkWidget *widget, gpointer label)
{
  count--;

  sprintf(buf, "%d", count);
  gtk_label_set_text(GTK_LABEL(label), buf);
}

int main(int argc, char** argv) {

  GtkWidget *label;
  GtkWidget *window;
  GtkWidget *frame;
  GtkWidget *plus;
  GtkWidget *minus;

  gtk_init(&amp;argc, &amp;argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 250, 180);
  gtk_window_set_title(GTK_WINDOW(window), "+-");

  frame = gtk_fixed_new();
  gtk_container_add(GTK_CONTAINER(window), frame);

  plus = gtk_button_new_with_label("+");
  gtk_widget_set_size_request(plus, 80, 35);
  gtk_fixed_put(GTK_FIXED(frame), plus, 50, 20);

  minus = gtk_button_new_with_label("-");
  gtk_widget_set_size_request(minus, 80, 35);
  gtk_fixed_put(GTK_FIXED(frame), minus, 50, 80);

  label = gtk_label_new("0");
  gtk_fixed_put(GTK_FIXED(frame), label, 190, 58); 

  gtk_widget_show_all(window);

  g_signal_connect(window, "destroy",
      G_CALLBACK (gtk_main_quit), NULL);

  g_signal_connect(plus, "clicked", 
      G_CALLBACK(increase), label);

  g_signal_connect(minus, "clicked", 
      G_CALLBACK(decrease), label);

  gtk_main();

  return 0;
}
</pre>

<p>
The code example increases or decreases a value in a GtkLabel. 
</p>

<pre class="explanation">
 g_signal_connect(plus, "clicked", 
     G_CALLBACK(increase), label);
</pre>

<p>
We connect the <b class="keyword">increase()</b> callback to the plus button. 
Note that we send a label as a parameter to the callback. We will work on this 
label inside the callback function. 
</p>

<pre class="explanation">
  count++;

  sprintf(buf, "%d", count);
  gtk_label_set_text(GTK_LABEL(label), buf);
</pre>

<p>
Inside the increase callback, we increase the counter. Make textual data 
out of the number value and update the label. 
</p>

<br>
<img src="/img/gui/cgtk/plusminus.png" alt="Increase - Decrease">
<div class="figure">Figure: Increase - Decrease</div>
<br>

<hr class="btm">

<p>
In this chapter we introduced some simple GTK+ programs. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 2, 2008  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

